<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <e-heading>退款管理</e-heading>
      <el-form v-bind="getFormProps()" :inline="true">
        <el-form-item label="服务单号：">
          <el-input size="small" style="width:160px" v-model="query.refundNumber"/>
        </el-form-item>
        <el-form-item label="申请时间：">
          <el-date-picker
            size="small"
            type="daterange"
            style="width:220px"
            v-model="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="申请状态：">
          <el-select size="small" style="width:100px" v-model="query.refundStatus" placeholder="请选择">
            <el-option
              :key="null"
              label="全部"
              :value="null">
            </el-option>
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-button size="small" type="primary-plain" native-type="submit">搜索</el-button>
      </el-form>
      <div v-if="list && list.list">
        <el-table
          v-bind="getTableProps()"
          :data="list.list">
          <el-table-column
            prop="refundNumber"
            label="服务单号"
            align="center">
          </el-table-column>
          <el-table-column
            label="申请时间"
            width="90"
            align="center">
              <template slot-scope="scope">
              {{new Date(scope.row.createTime).format('yyyy-MM-dd hh:mm:ss')}}
              </template>
          </el-table-column>
          <el-table-column
            prop="buyerName"
            label="用户昵称"
            align="center"
            width="150">
          </el-table-column>
          <el-table-column
            label="退款金额"
            width="130"
            align="center">
              <template slot-scope="scope">
              {{scope.row.refundAmount|formatMoney}}
              </template>
          </el-table-column>
          <el-table-column
            label="申请状态"
            width="100"
            align="center">
            <template slot-scope="scope">
              {{statusMap[scope.row.refundStatus + '']}}
            </template>
          </el-table-column>
          <el-table-column
            label="处理时间"
            width="110"
            align="center">
              <template slot-scope="scope">
                {{scope.row.updateTime&&new Date(scope.row.updateTime).format('yyyy-MM-dd hh:mm:ss')}}
              </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template slot-scope="scope">
              <el-button @click="handleDetail(scope.row)" type="link">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-bind="getPaginationProps(list)"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { pagingList } from 'utils/mixins'

export default {
  mixins: [pagingList],
  computed: {
    ...mapState({
      list: state => state.refund.list,
      statusList: state => state.refund.statusList,
      statusMap: state => state.refund.statusMap
    }),
    date: {
      get () {
        return this.query.startDate ? [new Date(Number(this.query.startDate)), new Date(Number(this.query.endDate))] : null
      },
      set (value) {
        this.query.startDate = value && value[0] ? value[0].getTime() : null
        this.query.endDate = value && value[1] ? value[1].getTime() : null
      }
    }
  },
  data () {
    return {
      query: this.getQuery({
        refundStatus: this.$route.query.refundStatus || null,
        startDate: this.$route.query.startDate || null,
        endDate: this.$route.query.endDate || null
      })
    }
  },
  methods: {
    fetch (query) { // 分页，和搜索表单发生提交时触发事件
      let _query = Object.assign({}, query)
      if (_query.startDate && _query.startDate === _query.endDate) { // 同天则传下一天时间
        _query.endDate = _query.endDate + 86400000
      }
      this.$store.dispatch('refund/list', _query)
    },
    handleDetail (row) {
      this.$router.push(`/refund/detail/${row.refundNumber}`)
    }
  }
}
</script>

<style lang="scss" scoped>
  
</style>
